<template>
    <el-aside :width="menuCollapse?'75px':'200px'" class="sidebar">

        <el-menu :collapse="menuCollapse" :default-active="onRoutes" active-text-color="#20a0ff" background-color="#fff"
                 class="sidebar-el-menu" router text-color="#000" unique-opened>

            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :key="item.index" :index="item.index" :style="{ display:item.disabled?'none':'' }">
                        <template #title>
                            <i :class="item.icon"></i>
                            <span>{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu v-if="subItem.subs" :key="subItem.index" :index="subItem.index">
                                <template #title>{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
                                    {{ threeItem.title }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :key="subItem.index" :disabled="subItem.disabled"
                                          :index="subItem.index">{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :key="item.index" :disabled="item.disabled" :index="item.index"
                                  :style="{ display:item.disabled?'none':'' }">
                        <i :class="item.icon"></i>
                        <template #title>{{ item.title }}</template>
                    </el-menu-item>
                </template>
            </template>
            <div class="elSwitch">
                <i :class="{'el-icon-s-fold':isCollapse,'el-icon-s-unfold':!isCollapse ,'collapseIcon':true} "
                   @click="collapseClick"></i>
            </div>
        </el-menu>

    </el-aside>
</template>

<script>
import {computed, onMounted, ref} from 'vue';
import {useStore} from 'vuex';
import {useRoute, useRouter} from 'vue-router';
import {getPermissionApi} from '@/api/user.js';
import {btnPermissionConfig, siderbarList, pagePermissionConfig} from '@/components/config/config';

export default {
    setup() {
        const ENV = import.meta.env;
        
        const items = ref(siderbarList);
        const btnPermission = ref(btnPermissionConfig);
        const pagePermission = ref(pagePermissionConfig);
        const route = useRoute();
        const router = useRouter();
        const store = useStore();

        const currentRoute = router.currentRoute.value.name;

        const onRoutes = computed(() => {
            return route.path;
        });
        let userInfo = window.localStorage.getItem('userInfo');
        let user = JSON.parse(userInfo || '{}');

        getPermissionApi({
            clientId: ENV.VITE_CLIENT_ID,
            userId: user.id,
        }).then((res) => {
            if (res.data.code == 200) {
                //button权限
                res.data.data.forEach((item) => {
                    if (item.type == 3 && item.state == 1) {
                        btnPermission.value[item.path] = true;
                    }
                });
                store.commit('setBtnPermission', btnPermission.value);

                //页面权限 与后端接口返回做对比
                
                items.value.forEach((item, index) => {
                    item.disabled = true;
                    res.data.data.forEach((li, key) => {
                        if (item.index == li.path && li.type == 2 && li.state == 1) {
                            item.disabled = false;
                            pagePermission.value[li.path] = true
                        }
                    });
                    store.commit('setPagePermission', pagePermission.value)
                });
            }
        });

        const collapse = computed(() => store.state.collapse);

        const menuCollapse = ref(collapse.value);

        window.addEventListener('resize', () => {
            menuCollapse.value = collapse.value;
            isCollapse.value = !collapse.value;
        });

        onMounted(() => {
            menuCollapse.value = collapse.value;
            isCollapse.value = !collapse.value;
        });
        const isCollapse = ref(true);
        const collapseClick = () => {
            isCollapse.value = !isCollapse.value;
            menuCollapse.value = !menuCollapse.value;
        };

        return {
            items,
            onRoutes,
            collapse,
            currentRoute,
            btnPermission,
            menuCollapse,
            isCollapse,
            collapseClick,
        };
    },
};
</script>

<style lang="less" scoped>
.sidebar {
    display: block;
    /* position: absolute;
      left: 0;
      top: 70px;
      bottom: 0; */
    overflow-y: scroll;

    .sidebar-el-menu {
        position: relative;


        .elSwitch {
            background-color:#fff;
            position: absolute;
            bottom: 80px;
            left: 15px;

            .collapseIcon {
                font-size: 18px;
                color: #accced;
                cursor: pointer;
            }
        }
    }
}

.sidebar::-webkit-scrollbar {
    width: 0;
}

.sidebar > ul {
    height: 100%;
}

.fa {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    vertical-align: middle;
}
</style>
